

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class MainPage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  var _controller = new ScrollController();

  @override
  Widget build(BuildContext context) {
    Widget buildingWidget = Scaffold(
      appBar: AppBar(
        title: Text("Hello world"),
        centerTitle: true,
      ),
      body: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Column(
          children: [
            Container(
              height: 130.0,
              alignment: Alignment.centerLeft,
              child: AnimatedBuilder(
                animation: _controller,
                builder: (context, child) => Transform.translate(
                  offset: Offset(_controller.positions.isEmpty ? 0.0 : _controller.position.pixels / 10, _controller.positions.isEmpty ? 0.0 : _controller.position.pixels / 10),
                  child: Transform.rotate(
                    angle: _controller.position.pixels / 200,
                    child: Container(
                      width: 60.0,
                      height: 60.0,
                      color: Color.lerp(Colors.orange, Colors.blue, _controller.positions.isEmpty ? 0.0 : _controller.position.pixels / 1000),
                    ),
                  ),
                )
              )
            ),
            Expanded(
              child: ListView(
                controller: _controller,
                children: List.generate(10000, (index) => SizedBox(
                  height: 120.0,
                  child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: List.generate(10, (_index) => SizedBox(
                        width: 300.0,
                        child: _buildItem(index, _index),
                      )
                    )
                  ),
                ),
              ),
            ))
          ],
        )
      )
    );

    return buildingWidget = AnimatedBuilder(
      animation: _controller,
      builder: (context, child) => Transform.rotate(
        child: child,
        angle: _controller.positions.isEmpty ? 0.0 : _controller.position.pixels / 1000,
      ),
      child: buildingWidget,
    );
  }

  Widget _buildItem(int index, int secondIndex) {
    Widget buildingWidget = SizedBox(
      height: 120.0,
      child: Stack(
        children: [
          Container(
            width: double.infinity,
            margin: EdgeInsets.all(10.0).copyWith(left: 80.0),
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.05),
              borderRadius: BorderRadius.circular(25.0),
            ),
            padding: EdgeInsets.all(10.0),
            child: Row(
              children: [
                SizedBox(width: 40.0,),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text("Title: $index", style: TextStyle(color: Colors.orange, fontSize: 16.0, fontWeight: FontWeight.bold)),
                    SizedBox(height: 10.0,),
                    Text("Sub title: $index",),
                  ],
                ),
                Spacer(),
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Icon(Icons.edit, color: Colors.black.withOpacity(0.5),),
                    Icon(Icons.delete, color: Colors.black.withOpacity(0.5),),
                  ],
                )
              ],
            )
          ),
          Positioned(
            top: 0.0,
            bottom: 0.0,
            left: 35.0,
            child: Hero(
              tag: "$index:$secondIndex",
              child: CircleAvatar(
                radius: 40.0,
                backgroundColor: Colors.orange,
              ),
            )
          )
        ],
      )
    );

    buildingWidget = GestureDetector(
      child: buildingWidget,
      onTap: () async {
        var result = await Navigator.of(context).push<String>(MaterialPageRoute(builder: (context) => new SecondPage("$index:$secondIndex"),));
        print(result);
      },
    );

    return buildingWidget;
  }
}


class SecondPage extends StatelessWidget {
  String index;
  String text;
  SecondPage(this.index);

  @override
  Widget build(BuildContext context) {

    var border = OutlineInputBorder(
      borderRadius: BorderRadius.circular(12.0),
      borderSide: BorderSide.none,
    );

    var _inputBorder = InputDecoration(
      filled: true,
      enabledBorder: border,
      disabledBorder: border,
      focusedBorder: border,
      fillColor: Colors.white,
      contentPadding: EdgeInsets.all(0.0),
      hintText: "Please input your name",
      prefixIcon: Icon(Icons.person)
    );

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: Text("Index is: $index"),
      ),
      body: Center(
        child: Container(
          width: 280.0,
          padding: EdgeInsets.all(10.0),
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.05),
            borderRadius: BorderRadius.circular(12.0),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Hero(
                tag: index,
                child: CircleAvatar(
                  radius: 60.0,
                  backgroundColor: Colors.orange,
                  backgroundImage: NetworkImage("https://i.kinja-img.com/gawker-media/image/upload/s--LuO26jkY--/c_scale,f_auto,fl_progressive,q_80,w_800/197ye01r8rig0jpg.jpg"),
                ),
              ),
              SizedBox(height: 20.0,),
              TextField(
                decoration: _inputBorder
              ),
              SizedBox(height: 10.0,),
              TextField(decoration: _inputBorder.copyWith(
                hintText: "Please input your password",
                prefixIcon: Icon(Icons.lock)
              ),),
              SizedBox(height: 20.0,),
              RaisedButton(
                child: Text("Login", style: TextStyle(color: Colors.white),),
                onPressed: (){},
                color: Colors.orange,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12.0)
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}